<template>
  <div class="pinia">count:{{ count }}</div>
  <p>name:{{ name }}</p>
  <p>使用getter获取数据doubleCount：{{ doubleCount }}</p>
  <p>使用getter获取数据getAddAge：{{ getAddAge }}</p>
  <p>使用getter获取数据getNameAndAge：{{ getNameAndAge }}</p>
  <button @click="handleAddCount" style="margin-right: 30px">*+*</button>
  <button @click="handleDelCount">*-*</button>
  <button @click="handleReset">重置数据</button>
</template>

<script setup>
import useCounterStore from '@/store/modules/counter'
import { storeToRefs } from 'pinia'
const store = useCounterStore()
const { count, name, doubleCount, getAddAge, getNameAndAge } = storeToRefs(store)
// 单条数据直接修改
const handleAddCount = () => {
  // 第一种方法，直接修改
  /*   store.count++
  store.name = store.count % 2 == 0 ? '李四' : '张三' */
  // 第二种方法,批量修改
  /*   store.$patch({
    count: store.count + 1,
    name: store.count % 2 == 0 ? '李四' : '张三'
  }) */
  /*   store.$patch((state) => {
    state.count++
    state.name = state.count % 2 == 0 ? '李四' : '张三'
  }) */
  // 第三种方法
  store.increment()
}
const handleDelCount = () => {
  store.decrement()
}
const handleReset = () => {
  store.$reset()
}
</script>

<style lang="scss" scoped></style>
